<template>
	<view class="logIn-page">
		
		<view class="return" @click="goToPurchase"><</view>
		
		<view class="welcome">欢迎登录<br />易上加速器!</view>
			
		<view class="cellphone">
			<image src="../../../static/images/purchase/logIn/2.png"></image>
			<input type="number" v-model="mobile" placeholder="手机号">
		</view>
		
		<view class="cellphone">
			<image src="../../../static/images/purchase/logIn/1.png"></image>
			<input type="password" v-model="password" placeholder="请输入密码">
		</view>
		
		<view class="forget">
			<a href="#">忘记密码?</a>
		</view>
		
		<checkbox-group @change="handleCheckboxChange">
		<checkbox class="agreement" activeBorderColor="#318BED" iconColor="#318BED" >
			登录代表同意&nbsp;<a>《使用条款》</a>&nbsp;<a>《隐私政策》</a>
		</checkbox>
		</checkbox-group>
		
		<view class="securityManual">
			<p>请合法使用本软件，提高防诈意识，保护财产安全，点击查看<a href="#">《安全手册》</a></p>
		</view>
		
		<view v-if="errorMessage" class="error-message">{{errorMessage}}</view>
		
		<view class="logLn" @click="handleLogin">
			登录
		</view>
		
		<view class="register">
			没有账号,&nbsp;
			<view class="renew" @click="goToRegisterAanAccount">
				<p>立即注册></p>
			</view>
		</view>
		
		
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { apiLogin } from '@/api/login.js';
	
	// 定义响应式的用户对象
	const mobile = ref(''); // 手机号
	const password = ref(''); // 密码
	const imei = ref(''); // 设备IMEI号
	const device_name = ref(''); // 设备名称
	const isAgreeTerms = ref(false); // 是否同意使用条款
	const errorMessage = ref(''); // 展示错误提示信息
	
	
	onMounted(() => {
	    try {
	        const systemInfo = uni.getSystemInfoSync();
	        imei.value = systemInfo.deviceId; // 安卓的 deviceId 对应 IMEI 号
			device_name.value = systemInfo.	deviceBrand + ' ' + systemInfo.deviceModel; // 组合品牌和型号作为设备名称
			console.log('获取到的 IMEI 号（或类似标识）：', imei.value);
			console.log('获取到的安卓设备名称：', device_name.value);
	    } catch (error) {
	        console.error('获取 IMEI 号时出现错误：', error);
			console.error('获取安卓设备名称时出现错误：', error);
	    }
	});
	
	// 定义选择框状态改变的事件处理函数
	const handleCheckboxChange = (event) => {
	    if (isAgreeTerms.value === false) {
	        isAgreeTerms.value = true;
	    } else {
	        isAgreeTerms.value = false;
	    }
	    console.log('使用条款的勾选状态改变');
	};
	
	// 处理登录操作的函数
	const handleLogin = async () => {
	  try {
		// 检查手机号是否正确
		if (!mobile.value || mobile.value.length !== 11) {
		    throw new Error('请填写正确的手机号');
		}
		// 检查必填项是否填写完整的登录信息
		if (!password.value) {
		    throw new Error('请填写密码');
		}
		if (password.value.length < 8 || password.value.length > 12) {
			throw new Error('请填写正确的密码');
		}
		// 检查是否同意使用条款
		if (isAgreeTerms.value === false) {
		    throw new Error('请同意使用条款后再登录');
		}
		
	    const res = await apiLogin({
			mobile: mobile.value,
			password: password.value,
			imei: imei.value,
			device_name: device_name.value,
		});
		// console.log(res);
		const token = res.data
	    // 根据后端返回结果处理成功或失败情况
	    if (res.code == 1) {
			// 添加其他成功提示的逻辑
			uni.setStorageSync('token', token);
			console.log('Token保存成功');
			    uni.navigateBack({
			        delta: 1,
			        animationType: 'pop-out',
			        animationDuration: 200,
			    });
			// console.log(uni.getStorageSync('token'));
			// console.log(res.data)
	        console.log('登录成功');
	    	errorMessage.value = '';
	    } else {
	    	// 添加显示错误提示信息的逻辑
	        console.error('登录失败：', res.msg);
	    	errorMessage.value = res.msg;
	    }
	  } catch (err) {
	    // 添加显示错误提示信息的逻辑
	    console.error('登录过程中出现错误：', err.message);
	    errorMessage.value = err.message;
	  }
	};

	// 转向立即注册
	const goToRegisterAanAccount = () =>{
		uni.navigateTo({
			url:'/pages/purchase/registerAanAccount/registerAanAccount',
			animationType: 'pop-in',
			animationDuration: 1000,
		})
	}
	// 返回上一页
	const goToPurchase = () =>{
		uni.navigateBack({
			delta:1,
			animationType: 'pop-out',
			animationDuration: 1000,
		})
	}
	
	
	
</script>

<style lang="scss" scoped>

	// 背景
.logIn-page {
	background-image: url('../../../static/images/purchase/logIn/3.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100vw;
	height: 100vh;
	position: relative;
	padding-top: 80px;
}

	// 返回
.return{
	position: absolute;
	left: 30px;
	top: 40px;
	font-size: 30px;
	color: #ffffff;
	// font-weight: bold;
}

.welcome{
	width: 85%;
	margin: 0 auto;
	font-size: 35px;
	font-weight: 600;
	margin-bottom: 50px;
	// background-color: #55ffff;
}

.cellphone{
	width: 85%;
	height: 50px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	margin-top: 20px;
	border-bottom: #E6F0F5 solid 1px;
	// background-color: #ffaaff;
}

.cellphone image{
	width: 15px;
	height: 20px;
}

.cellphone input{
	margin-left: 10px;
}

.forget{
	width: 85%;
	height: 50px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 15px;
	// background-color: #aaffff;
}

.agreement{
	display: flex;
	margin: 0 auto;
	width: 80%;
	font-size: 13px;
	margin-top: 20px;
	margin-bottom: 10px;
	// background-color: #aaff00;
}

.securityManual{
	display: flex;
	margin: 0 auto;
	width: 80%;
	height: 50px;
	font-size: 13px;
	margin-bottom: 20px;
	// background-color: #aaff00;
	padding-left: 30px;
}

a {
	text-decoration: none;
	color: #318BED;
}

	// 提示信息
.error-message{
	display: flex;
	margin: 0 auto;
	width: 80%;
	font-size: 15px;
	padding-left: 30px;
	color: #ff0000;
	// background-color: #55ffff;
	animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	animation-iteration-count: 1;
}

.logLn{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 20px;
	width: 80%;
	height: 50px;
	margin: 0 auto;
	margin-top: 40px;
	background-color: #F4F7F9;
	border-radius: 50px;
	background: linear-gradient(to right, #3AACFF, #635CFF);
}

.register{
	width: 85%;
	height: 150px;
	margin: 0 auto;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	// background-color: #ffff7f;
}

.renew{
	height: 25px;
	width: 70px;
	border-radius: 15px;
	border: 0.8px solid #318BED;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	color: #318BED;
}

</style>
